/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  BlobInputList, CCell, Cell, Table, TableBody, TableRow, Text,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";
import {usePrefixDataTable} from "../../hook/usePrefixData";
import {useMeasureInpFilter} from "../../common/hooks";
import {useThreeRaftSurvey} from "../../hook/useThreeRaft";
import {FootMenRow} from "../../contain/rarelyVary";

export const config附件仪 = [
  [[{pr: '安全阀', span: 3, t: '型号'}, '阀型号',], ['数量', {n: '阀数量', u: '个'}] ],
  [[{t: '校验日期'}, {n: '阀校验日', t: 'd', }], ['校验报告编号', '阀校验报']],
  [[{t: '整定压力'}, {n: '阀整定压', u: 'MPa'}], ['安装位置', '阀安位']],
  [[{pr: '压力表', span: 3, t: '量程'}, {n: '压量程', u: 'MPa'} ], ['数量', {n: '压数量', u: '个'}]],
  [[{t: '精度'}, '压精度'], ['检定日期', {n: '压检定日', t: 'd', }] ],
  [[{t: '检定报告编号'}, '压检定报',], ['安装位置', '压安位',]],
];

//特别拆分：测温仪表
const config附仪下 = [
  [['型号', '温型号'],  ['有效期', {n: '温效期', t: 'd'}],  ['外观', '温外观'] ],
];
//合并：给唯一性检查
export const config附件仪2=[...config附件仪, ...config附仪下];
export const itemA安附结=['附仪其他','附仪结果' ];
/**通用见证材料3项的： 约定：children [] 可以嵌入俩个儿子DOM节点，分别代表两个段落插入一个div块;
 * */
export const SafetyAccesorRes=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,refWidth}:InternalItemProps,  ref
    ) => {
      const {inp, setInp} = useItemInputControl({ ref });
      const [renderBelow, itemA1] = useThreeRaftSurvey({inp, setInp, config: config附仪下 });
      const itemA = React.useMemo(() => {
          return [...itemA安附结, ...itemA1];
      }, [itemA1]);
      const [getInpFilter]=useMeasureInpFilter(null,itemA,);
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}:</Text>
        <Text variant="h6">测温仪表：</Text>
        {renderBelow}
        <hr/>
        <Text variant="h5">其他阀门、附件检验：</Text>
        <BlobInputList value={inp?.附仪其他 || ''} rows={8}
                       onListChange={v => setInp({...inp, 附仪其他: v || undefined})}/>
        <Text variant="h5">安全附件-检验结果：</Text>
        <BlobInputList value={inp?.附仪结果 || ''} rows={4} datalist={['系统中安全阀、压力表校验合格。']}
                       onListChange={v => setInp({...inp, 附仪结果: v || undefined})}/>
      </InspectRecordLayout>;
});

export const SafetyAccesorVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const renderUpper=usePrefixDataTable({config: config附件仪, orc, rep, slash:true});
  const below=useThreeColumnView({orc, config:config附仪下,slash:true,
            embedCol: [ <CCell>测温仪表</CCell> ] });

  return <>
    <div css={{"@media print": {paddingBottom: '7rem', pageBreakInside: 'avoid'}}}>
      <Text id='SafetyAccesor' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>安全附件检验及仪表检验报告</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text>使用证号：{orc?.使用证号}</Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["6.3%","12.1%","36%","6.1%","6%","%"] }
                  css={{borderCollapse: 'collapse',"@media print": {marginTop: '-7rem'} }} tight  miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={"SafetyAccesor"}>
          {renderUpper}
        </RepLink>
      </TableBody>
    </Table>
    <Table fixed={  ["8.1%","5%","29%","6.6%","13%","5%","%"] }
              css={{borderCollapse: 'collapse', }} tight  miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={"SafetyAccesorRes"}>
          {below}
          <TableRow>
            <Cell colSpan={7}><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
              其他阀门、附件检验：<br/>
              {orc?.附仪其他 || '／'}
            </div></Cell>
          </TableRow>
          <TableRow>
            <Cell colSpan={7}><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
              检验结果：<br/>
              {orc?.附仪结果 || '／'}
            </div></Cell>
          </TableRow>
        </RepLink>
      </TableBody>
        <FootMenRow span={7} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </Table>
  </>;
};
